<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        vue提供内置的功能指令基本都是针对固定功能的操作；
        实际项目开发中可能会存在一些个性化的，针对DOM操作的，项目功能需要；而且该功能可能会被多次使用；此时希望能够提供一个服用的定义代码；
            
        局部指令定义
            Vue.createApp({
                directives:{ key[string]:value[Fuction]  }
            })
            + key 指令名称
            + value 指令取值 , 取值为指令执行方法 function( el,binding ){}
                - el 当前指令对应的绑定DOM元素
                - binding 指令页面调用时携带的相关数据,取值为Object
                    * value： 指令=右侧的取值
                    * arg：指令名称后以:关键字传入的参数
                    * modifiers：指令名称后以.关键字携带的修饰符；该属性取值为Object对象
                                  => 对象取值中： key 修饰符名称，value取值为true 表示启用修饰符
                                                 如果某个修饰符没有在页面被调用，对象中不会存在该修饰符

        全局指令定义 - 组件开发时会被应用的一个特殊功能操作
            语法：app.directive( id,definition )
                id=name : 定义指令名称
                definition :指令的处理函数，function( el，binding，newVnode,oldVnode ){}
                参数参考 局部指令
        </pre>
        <p :style=" msg1.length>5?`background-color:red;`:''">msg1：{{ msg1 }}</p>
        <p v-bgcolor1="msg1.length>5">自定义指令bgcolor-5</p>
        <input v-model="msg1" type="text" />

        <p :style=" msg2.length>6?`background-color:red;`:''">msg2：{{ msg2 }}</p>
        <p v-bgcolor:6="msg2">自定义指令bgcolor-6</p>
        <input v-model="msg2" type="text" />

        <p :style=" msg3.length>4?`color:red;`:''">msg3：{{ msg3 }}</p>
        <p v-bgcolor:4.color="msg3">自定义指令bgcolor-4</p>
        <input v-model="msg3" type="text" />

        <p :style=" msg4.length>3?`border:1px solid red;`:''">msg4：{{ msg4 }}</p>
        <p v-bgcolor:3.border="msg4">自定义指令bgcolor-3</p>
        <input v-model="msg4" type="text" />

        <hr>
        <!-- 属性不识别大小写，所以程序运行时如果指令名称为大小写组成，需要转换为连字符 -->
        <!-- <p v-globalColor:8.color="msg5">自定义指令globalColor-8</p> -->
        <p v-global-color:8.color="msg5">自定义指令bgcolor-8</p>
        <input v-model="msg5" type="text" />

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data() {
                return {
                    msg1:"abcd",
                    msg2:"abcd",
                    msg3:"abcd",
                    msg4:"abcd",
                    msg5:"abcd"
                }
            },
            directives:{
                bgcolor1:function( el,binding ){
                    console.log("bgcolor1:",el,binding);
                    if(binding.value){
                        el.style.backgroundColor="red";
                    }else{
                        el.style.backgroundColor = null;
                    }
                },
                // 自定义指令的定义
                bgcolor:function( el,binding ){
                    console.log("bgcolor:",el,binding);
                    // console.log(binding.value.length>binding.arg*1)
                    let color = binding.modifiers.color;
                    let border = binding.modifiers.border;
                    if(binding.value.length>binding.arg*1){
                        if(color){
                            el.style.color="red";
                        }else if(border){
                            el.style.border="1px solid red";
                        }else{
                            el.style.backgroundColor="red";
                        }
                    }else{
                        el.style.color=null;
                        el.style.border=null;
                        el.style.backgroundColor = null;
                    }
                }
            }
        })

        app.directive("globalColor",function(el,binding){
            let color = binding.modifiers.color;
            let border = binding.modifiers.border;
            if(binding.value.length>binding.arg*1){
                if(color){
                    el.style.color="red";
                }else if(border){
                    el.style.border="1px solid red";
                }else{
                    el.style.backgroundColor="red";
                }
            }else{
                el.style.color=null;
                el.style.border=null;
                el.style.backgroundColor = null;
            }
        })

        app.mount("#app")
    </script>
</body>
</html>